<template>
  <div class="left-container">
    <h2>Left</h2>
    <p>{{ age }}</p>
    <button @click="age++">+1</button>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from "@/components/ArtList.vue";
export default {
  components: {
    ArtList,
  },
  data() {
    return {
      age: 20,
    };
  },
  // 生命周期函数，和data、methods、computed、watch、components都是平级的
  // 1. beforeCreate 里面几乎什么都做不了，因为此时 data 数据、methods都没有准备好呢
  // beforeCreate() {
  //   console.log("1. beforeCreate", this.count); // undefined
  // },
  // // 2. created 里面可以使用 data、methods等等
  // created() {
  //   console.log("2. created", this.count); // 10
  // },
  // // 3. beforeMount 里面还不能进行DOM操作，因为页面还没有渲染呢
  // beforeMount() {
  //   console.log("3. beforeMount", document.querySelector("h2"));
  // },
  // // 4. mounted 里面可以进行DOM操作了（此时页面已经渲染完毕）
  // mounted() {
  //   console.log("4. mounted", document.querySelector("h2"));
  // },
  // // 5. beforeUpdate
  // beforeUpdate() {
  //   console.log("第5个", "数据更新了，但页面DOM结构还未更新");
  //   console.log("新的数据是：", this.count);
  //   console.log("页面中的数据是：", document.querySelector("p").innerText);
  // },
  // // 6. updated
  // updated() {
  //   console.log("第6个", "数据更新了，页面DOM结构也更新了");
  //   console.log("新的数据是：", this.count);
  //   console.log("页面中的数据是：", document.querySelector("p").innerText);
  // },
  // // 7. beforeDestroy
  // beforeDestroy() {
  //   console.log("第7个", "组件即将被销毁");
  //   console.log(this.$refs.artlistRef); // 这里的artlistRef 是 子组件的ref
  // },
  // // 8. destroyed
  // destroyed() {
  //   console.log("第8个", "组件已经被销毁");
  //   console.log(this.$refs.artlistRef); // 这里的artlistRef 是 子组件的ref
  // },
  errorCaptured(err, vm, info) {
    console.log(err.message); // 只输出后代组件的错误描述信息
    console.log(vm); // 发生错误的组件的实例对象
    console.log(info); // 一个描述信息
    return false; // 阻止错误继续向上层传播（错误会从子向父一层层传播）
  },
};
</script>

<style lang="less" scoped>
.left-container {
  background-color: cadetblue;
}
</style>
